<template>
	<view class="p-4">
    <fa-navbar title="手机号登录"></fa-navbar>
    <view class="u-m-t-50">
      <u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType" >
        <u-form-item :label-position="labelPosition"  prop="mobile" label-width="140">
          <u-input  :border="border" placeholder="请输入手机号码" v-model="form.mobile" type="number"></u-input>
        </u-form-item>
        <u-form-item :label-position="labelPosition"  :style="{background:'white'}" prop="captcha" label-width="140">
          <u-input  :border="border" placeholder="请输入验证码" v-model="form.captcha" type="text"></u-input>
          <u-button hover-class="none" type="primary" slot="right"
                    :custom-style="{ background: theme.bgColor, color: theme.color }" size="mini" @click="getCode">
            {{ codeTips }}
          </u-button>
        </u-form-item>
        <view class="u-text-center u-m-t-20" >
          <u-button hover-class="none"  type="primary"
                    :custom-style="{ background: theme.bgColor, color: theme.color }"
                    @click="goLogin"
                   >

            登录
          </u-button>


        </view>
      </u-form>
    </view>
    <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>

  </view>
</template>

<script>
	export default {
		data() {
			return {
        codeTips: '',
        labelPosition: 'left',
        border: false,
        errorType: ['message'],
        form: {
          mobile: '',
          captcha: ''
        },
        rules: {
          mobile: [{
            required: true,
            message: '请输入手机号码',
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change', 'blur']
          },
            {
              // 自定义验证函数，见上说明
              validator: (rule, value, callback) => {
                return this.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              trigger: ['change', 'blur']
            }
          ],
          captcha: [{
            required: true,
            message: '请输入验证码',
            trigger: 'change'
          }]
        },
			}
		},
    onReady() {

        this.$refs.uForm.setRules(this.rules);

    },
		methods: {
      codeChange(text) {
        this.codeTips = text;
      },
      // 获取验证码
      getCode: async function () {
        if (!this.$u.test.mobile(this.form.mobile)) {
          this.$u.toast('手机号码格式不正确！');
          return;
        }
        if (this.$refs.uCode.canGetCode) {
          let res = await this.$api.getSmsSend({
            mobile: this.form.mobile,
            event: 'mobilelogin'
          });
          setTimeout(() => {
            this.$u.toast(res.msg);
          }, 50);
          if (res.code == 1) {
            this.$refs.uCode.start();
          }
        } else {
          this.$u.toast('倒计时结束后再发送');
        }
      },
      goLogin: function () {
        this.$refs.uForm.validate(async valid => {
          if (valid) {
            if (this.vuex_wx_uid) {
              this.form.wx_user_id = this.vuex_wx_uid;
            }
            let res = await this.$api.mobilelogin(this.form);
            if (!res.code) {
              this.$u.toast(res.msg);
              return;
            }
            this.$u.vuex('vuex_token', res.data.token);
            this.success();
          } else {
            this.$u.toast('验证失败');
          }
        });
      }
		}
	}
</script>

<style lang="scss">
page{
  background-color: #f1f1f1;
}
.u-form-item{
  background-color: white;
  padding: 0 20rpx!important;
  margin-top: 20rpx;
  border-radius: 10rpx;
}
</style>
